<template>
  <div class="commonButton">
    <img class="bt_logo" src="@/assets/images/common/bt_logo.png" alt="">
    <!-- <div @click="uevi1" class="uevi1">设置相机主视角信息</div>
    <div @click="uevi2" class="uevi2">当前视角信息</div> -->
    <!-- <div @click="uevi3" class="uevi3">定位</div> -->
    <transition name="fade">
      <div class="center" v-show="buttonType == 0">
        <div class="btn_item" @click="changeCenterIndex(0)">
          <img src="@/assets/images/common/01-act.png" alt="" v-show="centerIndex == 0">
          <img src="@/assets/images/common/btn_01.png" alt="" v-show="centerIndex != 0">
        </div>
        <div class="btn_item" @click="changeCenterIndex(1)">
          <img src="@/assets/images/common/02-act.png" alt="" v-show="centerIndex == 1">
          <img src="@/assets/images/common/btn_02.png" alt="" v-show="centerIndex != 1">
        </div>
        <div class="btn_item" @click="changeCenterIndex(2)">
          <img src="@/assets/images/common/03-act.png" alt="" v-show="centerIndex == 2">
          <img src="@/assets/images/common/btn_03.png" alt="" v-show="centerIndex != 2">
        </div>
        <div class="btn_item" @click="changeCenterIndex(3)">
          <img src="@/assets/images/common/04-act.png" alt="" v-show="centerIndex == 3">
          <img src="@/assets/images/common/btn_04.png" alt="" v-show="centerIndex != 3">
        </div>
        <div class="btn_item" @click="changeCenterIndex(4)">
          <img src="@/assets/images/common/05-act.png" alt="" v-show="centerIndex == 4">
          <img src="@/assets/images/common/btn_05.png" alt="" v-show="centerIndex != 4">
        </div>
        <div class="btn_item" @click="changeCenterIndex(5)">
          <img src="@/assets/images/common/06-act.png" alt="" v-show="centerIndex == 5">
          <img src="@/assets/images/common/btn_06.png" alt="" v-show="centerIndex != 5">
        </div>
        <div class="btn_item" @click="changeCenterIndex(6)">
          <img src="@/assets/images/common/07-act.png" alt="" v-show="centerIndex == 6">
          <img src="@/assets/images/common/btn_07.png" alt="" v-show="centerIndex != 6">
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="center2" v-show="buttonType == 1">
        <div class="btn_item special">
          <!-- <img src="@/assets/images/common/07-act.png" alt="" v-show="centerIndex == 6"> -->
          <img src="@/assets/images/common/btn_07.png" alt="">
        </div>
        <div class="btn_item" @click="changeCenter2Index(0)">
          <img src="@/assets/images/common/01-1.png" alt="" v-show="center2Index == 0">
          <img src="@/assets/images/common/01.png" alt="" v-show="center2Index != 0">
        </div>
        <div class="btn_item" @click="changeCenter2Index(1)">
          <img src="@/assets/images/common/02-2.png" alt="" v-show="center2Index == 1">
          <img src="@/assets/images/common/02.png" alt="" v-show="center2Index != 1">
        </div>
        <div class="btn_item" @click="changeCenter2Index(2)">
          <img src="@/assets/images/common/03-3.png" alt="" v-show="center2Index == 2">
          <img src="@/assets/images/common/03.png" alt="" v-show="center2Index != 2">
        </div>
        <div class="btn_item" @click="changeCenter2Index(3)">
          <img src="@/assets/images/common/04-4.png" alt="" v-show="center2Index == 3">
          <img src="@/assets/images/common/04.png" alt="" v-show="center2Index != 3">
        </div>
        <div class="btn_item" @click="changeCenter2Index(4)">
          <img src="@/assets/images/common/05-5.png" alt="" v-show="center2Index == 4">
          <img src="@/assets/images/common/05.png" alt="" v-show="center2Index != 4">
        </div>
        <div class="btn_item" @click="changeCenter2Index(5)">
          <img src="@/assets/images/common/06-6.png" alt="" v-show="center2Index == 5">
          <img src="@/assets/images/common/06.png" alt="" v-show="center2Index != 5">
        </div>
        <div class="btn_item" @click="changeCenter2Index(6)">
          <img src="@/assets/images/common/07-7.png" alt="" v-show="center2Index == 6">
          <img src="@/assets/images/common/07.png" alt="" v-show="center2Index != 6">
        </div>
        <div class="btn_item" @click="changeCenter2Index(7)">
          <img src="@/assets/images/common/08-8.png" alt="" v-show="center2Index == 7">
          <img src="@/assets/images/common/08.png" alt="" v-show="center2Index != 7">
        </div>
      </div>

    </transition>
    <transition name="fade">
      <div class="center3" v-show="buttonType == 2">
        <div class="btn_item_01">
          <span>智能监控</span>
        </div>
        <div class="btn_item" :class="{ 'btn_item_active': center3Index == 0 }" @click="changeCenter3Index(0)">
          <span>供配电系统</span>
        </div>
        <div class="btn_item" :class="{ 'btn_item_active': center3Index == 1 }" @click="changeCenter3Index(1)">
          <span>给排水系统</span>
        </div>
      </div>
    </transition>
    <div class="right">
      <div class="right_item huizhong" :class="{ 'active_item': rightIndex == 0 }" @click="changeIndex(0)">
        <img src="@/assets/images/common/huizhong.png" alt="">
        <span>回中</span>
      </div>
      <div class="right_item manyou" :class="{ 'active_item': rightIndex == 1 }" @click="changeIndex(1)">
        <img src="@/assets/images/common/manyou.png" alt="">
        <span>漫游</span>
      </div>
      <div class="right_item changjing" :class="{ 'active_item': rightIndex == 2 }" @click="changeIndex(2)">
        <img src="@/assets/images/common/changjing.png" alt="">
        <span>场景模式</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/routes';
const uevi1 = () => {
  var cam = window.BlackHole3D.Camera.getCamLocate() //获取当前相机方位
  var forceCamLoc = new window.BlackHole3D.REForceCamLoc();
  forceCamLoc.force = true;
  forceCamLoc.camPos = cam.camPos;
  forceCamLoc.camDir = cam.camDir;
  window.BlackHole3D.Camera.setCamForcedInitLoc(forceCamLoc);
}
const uevi2 = () => {
  var Init = window.BlackHole3D.Camera.getCamForcedInitLoc();
  console.log('Init', Init);

  alert("相机位置（三元数）" + Init.camPos + "\n" +
    "相机的朝向（四元数）" + Init.camRotate + "\n" +
    "相机的朝向（欧拉角）" + Init.camDir)
}
const uevi3 = () => {
  var camLoc = new window.BlackHole3D.RECamLoc();
  camLoc.camPos = [61.612744020942465, -164.78981226179297, 27.798342490218584];
  camLoc.camRotate = [0.683392848504129, 0, 0, 0.7300508301573342];
  var locDelay = 0.5;
  var locTime = 1;
  window.BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
}

let rightIndex = ref(0);
let centerIndex = ref(-1);
let center2Index = ref(-1);
let center3Index = ref(-1);

let buttonType = ref(0); //0其他 1日常维护 2智能监控

const changeIndex = (index: number) => {
  rightIndex.value = index;
  // var cam = window.BlackHole3D.Camera.getCamLocate();
  // console.log('cam',cam);


}

const changeCenterIndex = (index: number) => {
  if (centerIndex.value != index) {
    centerIndex.value = index;
    if (index == 0) {
      router.push("/digitalProduction/digitalProduction");//数字生产
      buttonType.value = 0;
    } else if (index == 2) {
      router.push("/alarmCenter/alarmCenter");//报警中心
      buttonType.value = 0;
    } else if (index == 3) {
      router.push("/monitoring/powerDistribution");//智能监控-供配电系统
      buttonType.value = 2;
      center3Index.value = 0
    } else if (index == 6) {
      router.push("/dailyMaintenance/equipmentLedger");//日常维护-设备台账
      center2Index.value = 0
      buttonType.value = 1;
    }
  }


}

//日常维护
const changeCenter2Index = (index: number) => {
  if (center2Index.value != index) {
    center2Index.value = index;
    if (index == 0) {
      router.push("/dailyMaintenance/equipmentLedger");//设备台账
    } else if (index == 1) { //检修报修
      router.push("/dailyMaintenance/repairRequest");
    } else if (index == 2) {//日常巡检
      router.push("/dailyMaintenance/inspection");
    } else if (index == 3) {//设备维保
      router.push("/dailyMaintenance/equipmentMaintenance");
    } else if (index == 4) {//排班管理
      router.push("/dailyMaintenance/schedulingManage");
    } else if (index == 5) {//工单统计
      router.push("/dailyMaintenance/workOrder");
    } else if (index == 6) {//系统图纸
      router.push("/dailyMaintenance/systemDrawings");
    } else if (index == 7) {//备品备件
      router.push("/dailyMaintenance/spareParts");
    }
  }


}

//智能监控
const changeCenter3Index = (index: number) => {
  if (center3Index.value != index) {
    center3Index.value = index;
    if (index == 0) {
      router.push("/monitoring/powerDistribution");//供配电系统
    } else if (index == 1) { //给排水系统

    }
  }


}

const route = useRoute();
// 监听路由变化
watch(() => route.path, (newPath, oldPath) => {
  console.log(`Route changed from ${oldPath} to ${newPath}`);
  if (newPath.indexOf('/dailyMaintenance') > -1) {//日常维护
    buttonType.value = 1;
    if (newPath == '/dailyMaintenance/equipmentLedger') {
      center2Index.value = 0;
    } else if (newPath == '/dailyMaintenance/repairRequest') {
      center2Index.value = 1;
    } else if (newPath == '/dailyMaintenance/inspection') {
      center2Index.value = 2;
    } else if (newPath == '/dailyMaintenance/equipmentMaintenance') {
      center2Index.value = 3;
    } else if (newPath == '/dailyMaintenance/schedulingManage') {
      center2Index.value = 4;
    } else if (newPath == '/dailyMaintenance/workOrder') {
      center2Index.value = 5;
    } else if (newPath == '/dailyMaintenance/systemDrawings') {
      center2Index.value = 6;
    } else if (newPath == '/dailyMaintenance/spareParts') {
      center2Index.value = 7;
    }
  } else if (newPath.indexOf('/monitoring') > -1) {
    buttonType.value = 2;
    if (newPath == '/monitoring/powerDistribution') {
      center3Index.value = 0;
    }
  }
  else {
    buttonType.value = 0
    if (newPath.indexOf('/digitalProduction') > -1) {
      centerIndex.value = 0;
    } else if (newPath.indexOf('/alarmCenter/alarmCenter') > -1) {
      centerIndex.value = 2;
    }
    else {
      centerIndex.value = -1;
    }
  }

}, { immediate: true });


</script>

<style lang="scss" scoped>
.commonButton {
  width: 100%;
  height: vh(50);
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../assets/images/common/bottom_bg.png) no-repeat;
  background-size: 100% 100%;
  z-index: 999;

  .uevi1 {
    position: absolute;
    height: 20px;
    z-index: 999;
    left: vw(0);
    top: vh(0);
    background-color: yellow;
  }

  .uevi2 {
    position: absolute;
    z-index: 999;
    left: vw(300);
    top: vh(0);
    background-color: yellow;
  }

  .uevi3 {
    position: absolute;
    z-index: 999;
    left: vw(400);
    top: vh(0);
    background-color: yellow;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .bt_logo {
    position: absolute;
    height: vh(33);
    left: vh(21);
    // top: vh(8);
    bottom: vh(6);
  }

  .center {
    height: 100%;
    // width: vh(670);
    // width: vw(670);
    width: vw(750);
    position: absolute;
    left: 50%;
    bottom: 0;
    // transform: translate(-31.0185vh, 0);
    // transform: translate(-17.4479vw, 0);
    transform: translate(-19.53125vw, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn_item {
      width: vw(85);
      height: vw(29);
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .center2 {
    background: url(@/assets/images/dailyMaintenance/db.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: vw(750);
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translate(-19.53125vw, 0);

    .btn_item {
      width: vw(66);
      height: vw(25);
      cursor: pointer;

      &.special {
        width: vw(85);
        height: vw(29);
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .center3 {
    background: url(@/assets/images/dailyMaintenance/db.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: vw(750);
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-19.53125vw, 0);

    .btn_item_01 {
      width: vh(85);
      height: vh(29);
      background: url(@/assets/images/monitoring/bg_01.png) no-repeat;
      background-size: 100% 100%;
      margin-right: vh(15);
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: vh(12);
      color: #00E3FF;
      padding-right: vh(10);
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .btn_item {
      width: vh(66);
      height: vh(25);
      background: url(@/assets/images/monitoring/bg_03.png) no-repeat;
      background-size: 100% 100%;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: vh(11);
      color: #00E3FF;
      margin-right: vh(15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &.btn_item_active {
        background: url(@/assets/images/monitoring/bg_02.png) no-repeat;
        color: #ffb800;
      }
    }
  }

  .right {
    position: absolute;
    bottom: vh(6);
    right: vh(20);
    display: flex;
    color: #fff;
    font-family: Source Han Sans CN;
    font-size: vh(14);

    .right_item {
      display: flex;
      align-items: center;
      cursor: pointer;

      &.active_item {
        background: rgba(0, 89, 145, 0.5);
      }

      img {
        height: vh(16);
        width: auto;
      }
    }

    .huizhong {
      width: vh(71);
      height: vh(26);
      border-radius: vh(4) 0 0 vh(4);
      border: vh(1) solid #0281A4;

      img {
        margin-left: vh(9);
        margin-right: vh(11);
      }
    }

    .manyou {
      width: vh(71);
      height: vh(26);
      border-top: vh(1) solid #0281A4;
      border-bottom: vh(1) solid #0281A4;

      img {
        margin-left: vh(11);
        margin-right: vh(6);
      }
    }

    .changjing {
      width: vh(98);
      height: vh(26);
      background: rgba(0, 46, 63, 0.2);
      border-radius: 0 vh(4) vh(4) 0;
      border: vh(1) solid #0281A4;

      img {
        margin-left: vh(7);
        margin-right: vh(6);
      }
    }
  }
}
</style>
